<template>
    <el-menu
        router
        :default-active= "router.currentRoute.value.path"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#ffffff"
        text-color="#ffffff"
        background-color="#3a456b"
    >
      <el-menu-item index="/front/home">系统首页</el-menu-item>
      <el-menu-item index="/front/introductionDeta">攻略详情页</el-menu-item>
      <el-menu-item index="/manage/home">个人后台</el-menu-item>
      <el-menu-item index="tuichu" @click="logout">退出</el-menu-item>
    </el-menu>
  <RouterView></RouterView>
</template>

<script setup>
import router from "@/router/index.js";
const logout=() =>{
  localStorage.removeItem('code_user')
  location.href = '/login'
}
</script>
<style scoped lang="scss">
.el-menu-demo{
  background-color: #3a456b;
  border:none;
  .el-sub-menu__title{
    background-color: #3a456b;
    color: #ddd;
  }
  .el-menu-item{
    color: #ddd;
  }
  .el-menu-item:hover,

  .is-active{
    background-color: #537bee! important;
    color: #fff!important;
    border: none! important;
  }
  .el-menu-item:not(.is-active):hover,
  is-active:hover {
    background-color: #537bee! important;
    color: #000!important;
    border: none! important;
  }

  .el-sub-menu__title:hover{
    background-color: transparent! important;
  }

  .el-dropdown{
    cursor: pointer;
  }
  .el-tooltip__trigger{
    outline: none;
  }
  .el-menu--inline .el-menu-item{
    padding-left: 48px !important;
  }
}

</style>